<template>
  <div class="my-btn-container">
    <div style="margin-bottom: 30px">
    </div>
    <div class="my-submit-btn" :style="getBtnPadding">
      <div v-if="okEvent">
        <el-button type="primary" @click="okEvent">确认</el-button>
        <el-button type="info" @click="cancel"
        >取消
        </el-button>
      </div>
      <div v-else>
        <el-button type="primary" @click="cancel">关闭</el-button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'MyConfirmBtnGroup',
  props: {
    okEvent: {
      type: Function,
      required: false
    },
    afterCancelOpenPage: {
      type: String,
      default: '/index'
    }
  },
  computed: {
    getSliderStatus() {
      return this.$store.state.app.sidebar.opened
    },
    getBtnPadding() {
      if (this.getSliderStatus) {
        return { 'padding-left': '200px' }
      } else {
        return { 'padding-left': '50px' }
      }
    }
  },
  methods: {
    cancel() {
      this.$tab.closeOpenPage({
        path: this.afterCancelOpenPage
      })
    }
  }
}
</script>

<style scoped lang="scss">
.my-submit-btn {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 999;
  transform: translateX(-50%);
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  box-shadow: 0 -5px 10px rgb(217, 219, 222);
  background-color: white;
  transition: 0.5s;
}
</style>
